<template>
	<!-- 星盘-定向回答 -->
	<view class="flex flex-col box-astrolabel"
		:class="[showTitle?'rounded-lg bg-gradient-to-b from-[#F2F8FF] to-[#D0EDFF] py-30 px-20 mb-20':'mt-30']">
		<view class="flex items-center box-title" v-if="showTitle">
			<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
			<view class="title ml-10 font-bold">定向回答</view>
		</view>
		<view class="flex justify-around" :class="[showTitle?'mt-20':'']">
			<view class="flex-1" :class="{'ml-20': i != 0}" v-for="e,i in astrolabeList" :key="i" @click="onPath(e.router)">
				<image class="w-full" :src="e.icon" mode="widthFix"></image>
				<!-- <ImageBoxVue class="flex-1" :src="e.icon" width="460rpx" height="164rpx"></ImageBoxVue> -->
				<!-- <text class="mt-8">{{e.label}}</text> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'

	const props = defineProps({
		showTitle: {
			type: Boolean,
			default: true
		}
	})
	// const astrolabeList = [{
	// 	icon: "/static/test/astrolabe1.png",
	// 	label: "星盘",
	// 	router: "/pages/test/astrolabe"
	// }, {
	// 	icon: "/static/test/astrolabe2.png",
	// 	label: "关系合盘",
	// 	router: ""
	// }, {
	// 	icon: "/static/test/astrolabe3.png",
	// 	label: "卡牌测试",
	// 	router: ""
	// }, {
	// 	icon: "/static/test/astrolabe4.png",
	// 	label: "情感测试",
	// 	router: ""
	// }, {
	// 	icon: "/static/test/astrolabe5.png",
	// 	label: "心理",
	// 	router: ""
	// }, ]
	const astrolabeList = [{
		icon: "/static/test/astrolabe11.png",
		label: "星盘",
		// router: "/pages/test/astrolabeSingle"
		router: "/pages/views/archiveList?needCount=1&tab=1&from=tools"
	}, {
		icon: "/static/test/astrolabe12.png",
		label: "关系合盘",
		// router: "/pages/test/astrolabeDouble"
		router: "/pages/views/archiveList?needCount=2&tab=1&from=tools"
	}, {
		icon: "/static/test/astrolabe13.png",
		label: "卡牌测试",
		router: "/pages/test/tarot?id=1382936177731960832&dsts=1&ask=asdfasdf&from=tools"
	}]
	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
</script>

<style lang="scss" scoped>
	.box-astrolabel {
		border-color: #fff;

		.box-title {
			.title {
				font-size: 30rpx;
				color: #333;
			}
		}
	}
</style>